<template>
  <el-row :gutter="20" class="realDataWrapper">
    <el-col :span="24">
      <el-card shadow="always" body-style="padding:20px 10px">
        <el-descriptions direction="vertical"
                         :column="14" border>
          <template #title>
            {{ $t('mes.realTimeData')}} <el-tag effect="plain" type="warning" style="margin-left: 10px"> {{ (queryParams.productionLineCode || '-')}}</el-tag>
          </template>
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.trayNumber')">
            {{ data?.barcode || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="100" className="font-size20" :label="$t('mes.berOfQualified')">
            <el-tag size="small">{{ data?.totalQty || '0' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="120" className="font-size20" :label="$t('mes.scrapPlates')"
                                :span="2">
            <el-tag size="small">{{ data?.scrapQty || 0 }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialCode')">{{
              data?.materialCode || '-'
            }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialName')">
            {{ data?.materialName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialSpce')">
            {{ data?.materialSpec || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="60" className="font-size20" :label="$t('wms.unit')">
            <el-tag class="ml-2" type="info">{{ data?.unit || '-' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="130" className="font-size20" :label="$t('mes.standardQty')">
            {{ standardConsume }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.outputTime')">
            {{ data?.produceEndTime || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.endTimeOf')">
            {{ data?.restendTime || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="100" className="font-size20"
                                :label="$t('mes.qtyInspectionResult')">
            <el-tag effect="dark" :type="data?.qcResult === 'OK' ? 'success' : 'danger'"
            >{{ data?.qcResult }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="100" className="font-size20" :label="$t('mes.erpWhether')">
            <el-tag effect="dark" :type="data?.isErpSuccess === 'Yes' ? 'success' : 'danger'">{{ data?.isErpSuccess }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" :width="100" className="font-size20" :label="$t('wms.reportingStatus')">
            {{ data?.reportStatus || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import { inject } from 'vue'

export default {
  name: 'realDataCard',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    standardConsume () {
      const _this = this
      const number = Number(_this.data?.standardConsume || 0).toFixed(2)
      return number
    }
  },
  setup () {
    const queryParams = inject('queryParams')
    return { queryParams }
  }
}
</script>

<style lang="scss">
.font-size20 {
  line-height: 3 !important;
}
</style>
